<!DOCTYPE html>
<html>
<head>
	<title>基础选项卡</title>
<style type="text/css">
#div1{width: 200px;height: 350px;background: #8080c0;position: absolute;left:-200px;top:100px;z-index: 10}
#div1 span{width: 20px;height:100px;position: absolute;right:-20px;top:130px;background: #ff8040;} 
</style>
<script type="text/javascript">
window.onload=function(){
	var oDiv=document.getElementById('div1');
    oDiv.onmouseover=function(){
    	startmove(10,0);
    }
    oDiv.onmouseout=function(){
    	startmove(-10,-200);
    }
}
  var timer=null;
function startmove(speed,iTarget){
	var oDiv=document.getElementById('div1');
	
	clearInterval(timer);
	timer=setInterval(function(){
       if(oDiv.offsetLeft==iTarget){
       	clearInterval(timer);
       }else{
       	oDiv.style.left=oDiv.offsetLeft+speed+"px";
       }

	},30)
}
</script>
</head>
<body>
<div id="div1">
    <span>客服中心</span>
   <div style="font-size: 20px;font-weight: bold;">客服电话：<br>400-999-1420</div><br>
   <div style="font-size: 20px;font-weight: bold;">电话服务时间：<br>08：30-22:30</div><br>
   <div style="font-size: 20px;font-weight: bold;">投诉与建议邮箱：sxzb_hk8@126.com</div><br>
   <div style="font-size: 20px;font-weight: bold;">公司地址：<br>北京中关村内网服务站</div>
</div>
</body>
</html>